<html>
    <head>
        <meta charset="UTF-8">
        <title>checkbox的全选和取消</title>
        <script type="text/javascript" src="jquery-3.3.1.js"></script>
        <script type="text/javascript">
            function checkAll(){
                //1、获得一个checkbox的选中标签
                var flag = $("#chkElt").prop("checked");
                //2、为所有数据行checkbox的选择状态设置
                $(".interest").prop("checked",flag);
            }

      
        </script>
    </head>
    <body>
        <input type="checkbox" id="chkElt" onclick="checkAll();"/>全选<br>

        运动<input type="checkbox" class="interest" value="sport"/><br>
        旅游<input type="checkbox" class="interest" value="travel"/><br>
        美食<input type="checkbox" class="interest" value="foods"/><br>
        跳舞<input type="checkbox" class="interest" value="dance"/><br>
        音乐<input type="checkbox" class="interest" value="music"/><br>
        喝酒<input type="checkbox" class="interest" value="drink"/><br>
    </body>
</html>